extends inc/main.pug
block variables

block css
	style(type="text/css").
		.top {
			padding-bottom: 0;
		}
		#slider1 {
			height: 394px;
			background: #000;
			border-radius: 4px;
			overflow: hidden;
		}
		
		/* responsive rules */
		@media (max-width: 713px) {
			#slider1 {
				height: auto; /* reset slider height to automatically fix with the first image height. */
				border-radius: 0;
			}
		}


block content
	.top
		.tv
			#slider1
				- var val = 0
				while val++ < 6
					div: img(src='images/photo'+val+'.jpg' height="50")
		.notes
			h6 All photos are ready. (displayed in smaller size to keep the layout clean)
				br
				| Slider class has not been assigned.
				br
				| This demo is a best practice for Ajax loaded content.
				br
				a(href="#" class="activate") Click here 
				| to transform #slider1 box above into a slider.

block bottom-script
	script.
		(function($) {
			$('.notes .activate').on('click', function(evt) {
				evt.preventDefault();
				$('#slider1').sliderInit({
					'navigation': 'always'
					, 'delay': 0
				});
			});

		})(jQuery);
